<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <style>
        html,
        body,
        #container {
            width: 500px;
            height: 500px;
        }

        .list {
            display: inline-block;
            text-align: center;
            border: 1px solid #ccc;
        }

        span {
            display: block;
            width: 100px;
        }

        .gao li {
            font-size: 10px;
            color: red;
        }

        .shopping li {
            display: inline-block;
        }

        button {
            display: block;
            width: 200px;
        }
    </style>
</head>

<body>
    <span class="gong">商家公告<span class="gao"></span></span>
    <button onclick="ban()">半天妖烤鱼</button>
    <div class="fa">
    </div>
    <ul class="shopping_list">
    </ul>
    <div class="layui-carousel" id="ID-carousel-demo-image" style="margin: auto; position: absolute;left: 500px;">
        <div carousel-item>
            <div><img src="./微信截图_20250403153855.png" style="width: 100%;height: 100%;"></div>
            <div><img src="./微信截图_20250403153911.png" style="width: 100%;height: 100%;"></div>
            <div><img src="./微信截图_20250403153919.png" style="width: 100%;height: 100%;"></div>
        </div>
    </div>
    <h3>点饭</h3>
    <div class="list">招牌烤鱼</div>
    <div class="list">专属虾锅</div>
    <div class="list">特色烧烤</div>
    <div class="list">小吃炸货</div>
    <h2>总价<span class="zong">0</span></h2>
    <ul class="shopping">
    </ul>
    <div id="container"></div>
    <button onclick="ti()">提交</button>
    <!-- //jquery引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //公告

        $('.gong').on("click", () => {
            $(".gao").append(`
            <li>客观:请适度点餐,光盘行动拒绝浪费</li>
            `)
        })
    </script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "44af006c1d5088bc206c334e2ed202e7",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        function ban() {
            var a = [116.422118, 39.864537]
            $(".fa").html(`<h1>位置${a}</h1>`)
            AMapLoader.load({
                key: "06556c8d871b304796013c523cf38180", //申请好的Web端开发者 Key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            })
                .then((AMap) => {
                    const map = new AMap.Map("container");
                    const marker = new AMap.Marker({
                        position: [116.422118, 39.864537], //位置
                    });
                    map.add(marker); //添加到地图
                })
                .catch((e) => {
                    console.error(e); //加载错误提示
                });
        }
    </script>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
        });
    </script>
    <script>
        //开始
        var obj = [{
            pid: 0,
            id: 1,
            name: "青花椒烤鱼",
            img: "./微信截图_20250403154359.png",
            price: 79,
        }, {
            pid: 0,
            id: 2,
            name: "咖喱给喱烤鱼",
            img: "./微信截图_20250403154605鱼肉.png",
            price: 79,
        }, {
            pid: 1,
            id: 3,
            name: "蒜你香专属大虾锅",
            img: "./微信截图_20250403154730虾仁.png",
            price: 89,
        }, {
            pid: 1,
            id: 4,
            name: "辣么麻专属大虾锅",
            img: "./微信截图_20250403154747虾仁2.png",
            price: 89,
        }, {
            pid: 2,
            id: 5,
            name: "大叉烤肉",
            img: "./微信截图_20250403155013烧烤.png",
            price: 29,
        }, {
            pid: 2,
            id: 6,
            name: "烤翅中",
            img: "./微信截图_20250403155021烧烤2.png",
            price: 12,
        }, {
            pid: 3,
            id: 7,
            name: "茴香小油条",
            img: "./微信截图_20250403155209油条.png",
            price: 12,
        }, {
            pid: 3,
            id: 8,
            name: "咖喱给喱烤鱼",
            img: "./微信截图_20250403155218酥肉.png",
            price: 22.8,
        }]
    </script>
    <script>
        //tab切换
        function shopping_list_apply() {
            $(".list").each((index, item) => {
                item.addEventListener("click", () => {
                    $(".shopping_list").html('')
                    obj.forEach(i => {
                        if (i.pid == index) {
                            $(".shopping_list").append(`
<li><img src="${i.img}" alt="" onclick="xiang(${i.id})"><span>名称:${i.name}</span><span>价格$${i.price}</span>     <button onclick="shopping_add(${i.id})">添加</button></li>`)
                        }
                    })
                })
            })
        }
        shopping_list_apply()
    </script>
    <script>
        //添加
        var shopping_arr = []
        function shopping_add(id) {
            var index = obj.find(item => item.id == id)
            shopping_arr.push({
                id: shopping_arr.length + 1,
                pid: shopping_arr.length,
                name: index.name,
                img: index.img,
                price: index.price,
                nums: 1,
                is: false,
            })
            shopping_list_apply()
            shopping_arr_apply()
            shopping_price()
        }
    </script>
    <script>
        //计算
        function shopping_price() {
            var num = 0
            $(".zong").html('')
            shopping_arr.forEach(item => {
                num += item.price * item.nums
            })
            $('.zong').append(num)
        }
    </script>

    <script>
        //商品列表渲染
        function shopping_arr_apply() {
            $('.shopping').html("")
            shopping_arr.forEach(item => {
                $('.shopping').append(`
                <li><img src="${item.img}" alt="" onclick="xiang(${item.id})"><span>名称:${item.name}</span><span>价格$${item.price}</span>
                        <button onclick="shopping_price_minus(${item.id})">-</button>
    <span>${item.nums}</span>
    <button onclick="shopping_price_add(${item.id})">+</button>
        <input type="checkbox" ${item.is ? "checked" : ""}></li>
                `)
            })
        }
    </script>
    <script>
        //详情
        function xiang(id) {
            location.assign("./4.3详情.html?id=" + id)
        }
    </script>
    <script>
        //计算++
        function shopping_price_add(id) {
            var index = shopping_arr.findIndex(item => item.id == id)
            shopping_arr[index].nums++
            shopping_arr_apply()
            shopping_price()
        }
    </script>
    <script>
        //计算--
        function shopping_price_minus(id) {
            var index = shopping_arr.findIndex(item => item.id == id)
            if (shopping_arr[index].nums != 0) {
                shopping_arr[index].nums--
                shopping_arr_apply()
                shopping_price()
            }
        }
    </script>
    <script>
        //提交
        function ti() {
            var index = shopping_arr.filter(item => item.is = true)
            index.forEach(i => {
                var ind = index.find(item2 => item2.id == i.id)
                location.assign("./提交.html?id=" + ind.id)
            })
        }
    </script>
</body>

</html>